﻿<style>
    .layui-input-money {
        width: 100px;
    }

    .layui-input {
        margin-top: 7px;
        border-radius: 5px;
        height: 25px;
    }
</style>
<body>
    <div class="layui-row">
        <div class="layui-col-xs3">
            <div id="ID-coupons-back-color" style="width:100%;height:450px;border-radius:10px;background-color:#ff7800">
                <div style="margin-bottom:80px"><label style="margin-left:95px;color:white">优惠券详情</label></div>
                <div style="width:200px;height:300px;background-color:white;margin:auto;border-radius:10px;">
                    <p style="width:200px;text-align:center">智慧酒店</p>
                    <p style="width:200px;text-align:center">
                        <span style="color:#ff7800;font-size:25px">88</span>
                        <span style="color:#ff7800;">元</span>
                    </p>
                    <p style="width:200px;text-align:center">智慧酒店</p>
                    <p style="width:200px;text-align:center">智慧酒店</p>
                    <p style="width:200px;text-align:center">智慧酒店</p>
                </div>
            </div>
        </div>
        <div class="layui-col-xs9">
            <form class="layui-form" action="">
                <div class="layui-form-item">
                    <label class="layui-form-label">基本信息</label>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">优惠券标题</label>
                    <div class="layui-input-inline">
                        <input type="text" name="title" id="title" lay-verify="required" placeholder="请输入" autocomplete="off" lay-affix="clear" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">副标题</label>
                        <div class="layui-input-inline">
                            <input type="text" name="subhead" id="subhead" lay-verify="required" placeholder="请输入" autocomplete="off" lay-affix="clear" class="layui-input">
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">优惠券颜色</label>
                    <input type="text" id="color" name="color" hidden/>
                    <div class="layui-input-inline layui-input-wrap">
                        <div id="ID-colorpicker-demo-all"></div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">剩余库存</label>
                        <div class="layui-input-inline  " style="display: flex; align-items: center;">
                            <input type="text" id="stock" name="stock" hidden />
                            <input type="number" id="surplusStock" name="surplusStock" lay-verify="required" autocomplete="off" lay-affix="clear" class="layui-input layui-input-money">
                            <sapn style=""></sapn>
                            <sapn style=" display: inline-block;">张</sapn>

                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">每人限领</label>
                        <div class="layui-input-inline layui-input-wrap " style="display: flex; align-items: center;">
                            <input type="number" lay-verify="required" id="limitNum" name="limitNum" autocomplete="off" lay-affix="clear" class="layui-input layui-input-money">
                            <sapn style=" display: inline-block;">张</sapn>

                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">使用条件</label>
                    <div class="layui-input-inline layui-input-wrap" style="display: flex; align-items: center;">
                        <sapn style=" display: inline-block;  ">消费金额满</sapn>
                        <input type="number" lay-verify="required" autocomplete="off" id="satisfy" name="satisfy" lay-affix="clear" class="layui-input layui-input-money">
                        <sapn style=" display: inline-block;  ">元</sapn>
                    </div>

                </div>
                <div class="layui-form-item">
                    <div class="layui-inline" style="display: flex; align-items: center;">
                        <label class="layui-form-label">减免金额</label>
                        <input type="number" id="deductMoney" name="deductMoney" lay-verify="required" autocomplete="off" lay-affix="clear" class="layui-input layui-input-money">
                        <sapn style=" display: inline-block;  ">元</sapn>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">日期范围</label>
                    <div class="layui-input-inline">
                        <input type="text" class="layui-input" id="validityDate" name="validityDate" placeholder=" - ">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">优惠券类型</label>
                    <div class="layui-input-inline">
                        <select id="couponType" name="couponType">
                           
                       </select>
                    </div>
                </div>
              
                <div class="layui-form-item">
                    <div class="layui-form-item layui-form-text">
                        <label class="layui-form-label">详情设置</label>
                        <div class="layui-input-block">
                            <textarea placeholder="不超过1000字符" id="desc" name="desc" maxlength="1000" class="layui-textarea"></textarea>
                        </div>
                    </div>
                   
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">客服电话</label>
                    <div class="layui-input-inline">
                        <input type="text" name="customerPhone" id="customerPhone" lay-verify="required" placeholder="请输入" autocomplete="off" lay-affix="clear" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button type="submit" class="layui-btn" lay-submit lay-filter="demo1">立即提交</button>
                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
    <script>
        layui.use(['form', 'laydate', 'util'], function () {
            var form = layui.form;
            var layer = layui.layer;
            var laydate = layui.laydate;
            var util = layui.util;
            var colorpicker = layui.colorpicker;
            var $ = layui.jquery;
            // 自定义验证规则
            form.verify({
                pass: function (value) {
                    if (!/(.+){6,12}$/.test(value)) {
                        return '密码必须 6 到 12 位';
                    }
                }
            });
            var colors = "#ff7800";
            //渲染
            colorpicker.render({
                elem: '#ID-colorpicker-demo-all',
                color: '#ff7800',
                predefine: true,
                alpha: true,
                done: function (color) {
                    layer.msg('选择的值：' + color); // 选择完毕的颜色值
                    colors = "#ff7800"
                    // 清空或取消选择时也执行 change
                    color || this.change(color);
                },
                change: function (color) {
                    colors = color
                    $('#ID-coupons-back-color').css('background-color', color); // 设置为红色
                },
                cancel: function (color) { // 取消颜色选择的回调 --- 2.8+
                    this.change(color);
                }
            });


            function getCoupon(){
                $.ajax({
                    url: "http://localhost:5174/api/Conpous/GetCouponType",
                    type: "get",
                  
                    async: false,
                    headers: {
                        "Authorization": "Bearer " + localStorage.getItem('token')
                    },
                    success: res => {
                        console.log(res)
                        var content = `<option value="0">请选择优惠券类型</option>`
                        $.each(res,function(index,item){
                            content += `<option value="${item.value}">${item.name}</option>`
                        })
                        $("#couponType").html(content)
                        form.render('select')
                    },
                    error: function (error) {
                        console.log(error);
                    }
                });
            }
            getCoupon();
                // // 指定开关事件
                // form.on('switch(switchTest)', function (data) {
                //     layer.msg('开关 checked：' + (this.checked ? 'true' : 'false'), {
                //         offset: '6px'
                //     });
                //     layer.tips('温馨提示：请注意开关状态的文字可以随意定义，而不仅仅是 ON|OFF', data.othis)
                // });

            // 提交事件
            form.on('submit(demo1)', function (data) {
               
                var field = data.field; // 获取表单字段值
                // 显示填写结果，仅作演示用
                console.log(field);
                data.field.color = colors;
                data.field.stock = data.field.surplusStock;
                data.elem.disabled = true;
                // 此处可执行 Ajax 等操作
                $.ajax({
                    url: "http://localhost:5174/api/Conpous/Add",
                    type: "post",
                    contentType: "application/json",
                    data: JSON.stringify(field),
                    async: false,
                    headers: {
                        "Authorization": "Bearer " + localStorage.getItem('token')
                    },
                    success: res => {                       
                      console.log(res)
                        if(res.data>0){
                            layer.msg('添加成功')
                            location.href = "/Coupons/CouponsView"
                        }
                        else{
                            layer.msg(res.msg)
                        }
                    },
                    error: function (error) {
                        console.log(error);
                    }
                });
                // …
                return false; // 阻止默认 form 跳转
            });

            // 日期范围
            laydate.render({
                elem: "#validityDate",
                range: true,
                shortcuts: [
                    {
                        text: "上个月",
                        value: function () {
                            var date = new Date();
                            var year = date.getFullYear();
                            var month = date.getMonth();
                            return [
                                new Date(year, month - 1, 1),
                                new Date(year, month, 0)
                            ];
                        }
                    },
                    {
                        text: "这个月",
                        value: function () {
                            var date = new Date();
                            var year = date.getFullYear();
                            var month = date.getMonth();
                            return [
                                new Date(year, month, 1),
                                new Date(year, month + 1, 0)
                            ];
                        }
                    },
                    {
                        text: "下个月",
                        value: function () {
                            var date = new Date();
                            var year = date.getFullYear();
                            var month = date.getMonth();
                            return [
                                new Date(year, month + 1, 1),
                                new Date(year, month + 2, 0)
                            ];
                        }
                    }
                ]
            });

            // 普通事件
            util.on('lay-on', {
                // 获取验证码
                "get-vercode": function (othis) {
                    var isvalid = form.validate('.demo-phone'); // 主动触发验证，v2.7.0 新增
                    // 验证通过
                    if (isvalid) {
                        layer.msg('手机号规则验证通过');
                        // 此处可继续书写「发送验证码」等后续逻辑
                        // …
                    }
                }
            });
        });
    </script>

</body>
</html>